<!-- 后台管理 - 区域管理 -->
<!-- <body style="background-color: #f2f2f2;padding: 10px;"> -->
<template>
  <div id="box" class="back">
    <div style="float: right;" class="mg-10 addBtn">
      <el-button
        type="primary"
        size="medium"
        @click="
          dialogStatus = '新增';
          addUpdateVisible = true;
        "
      >
        添加
      </el-button>
    </div>
    <div style="width: 100%;background-color: white;padding: 10px 20px;">
      <span>区域名称：</span>
      <el-input v-model="regionForm.name" placeholder="区域名称" style="width: 20%;" clearable />
      <!-- <span>区域名：</span> -->
      <el-button
        size="medium"
        type="primary"
        class="fr"
        style="margin: 10px 20px 20px 0px;"
        @click="
          clearPagination();
          searchs();
        "
      >
        查询
      </el-button>
      <el-table border height="550" :data="tableData">
        <el-table-column label="区域编号" prop="code" align="center" />
        <el-table-column label="区域名称" prop="name" align="center" />
        <el-table-column label="基层医院数量" prop="basicCount" align="center" />
        <el-table-column label="中心医院数量" prop="centerCount" align="center" />
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="dataEcho(scope.row)">编辑区域</el-button>
            <el-button type="text" size="small" @click="scanRegion(scope.row)">查看区域</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--添加新区域-->
    <el-dialog :title="dialogStatus + '区域'" :visible.sync="addUpdateVisible" width="40%" center style="text-align: center;" :before-close="closeaddbase">
      <el-form ref="addbase" :model="send" :rules="addbaserules" label-width="100px" style="width: 100%;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;">
        <el-form-item label="选择省" prop="district">
          <el-select
            v-model="send.district"
            style="width: 80%;"
            filterable
            default-first-option
            placeholder="请选择省"
            clearable
            @change="
              send.city = '';
              send.code = '';
            "
          >
            <el-option v-for="(item, label, index) in districtMap" :key="index" :label="label" :value="label" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择区域" prop="city">
          <el-select
            v-model="send.city"
            style="width: 80%;"
            filterable
            default-first-option
            placeholder="请选择区域"
            value-key="city"
            clearable
            @change="send.code = send.city.code"
          >
            <el-option v-for="item in districtMap[send.district]" :key="item.city" :label="item.city" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="区域编号" prop="code"><el-input v-model="send.code" style="width: 80%;" placeholder="" disabled /></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="resetForm('addbase')">重置</el-button>
        <el-button size="medium" @click="handleClose('addbase')">取 消</el-button>
        <el-button size="medium" type="primary" @click="saveRegion(send, 'addbase')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { findRegionsByUserId, saveRegions, updateRegions, findChinaCity } from '@/api/back-management/account-set/regionManage'
export default {
  props: {
    tochild: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      addUpdateVisible: false,
      pageNum: 1, // 初始页
      pageSize: 10, //    每页的数据
      total: 0, //    总数
      regionForm: {
        name: ''
      },
      tableData: [],
      districtMap: {},
      regionMap: [],
      send: {
        id: undefined,
        district: '', // 选择的省份
        city: '', // 选择的区域
        code: '',
        name: ''
      },
      dialogStatus: '',
      // sendOptions: ['全模块-测试', '护士筛查', '基层医院', '救护车', '分诊台', '急诊抢救室/急诊门诊', '心内科', '神内科', '心电图室', '心外科', 'CT室', '超声室', '导管室/手术室', '病例管理员'],
      addbaserules: {
        district: [
          {
            required: true,
            message: '请选择省份',
            trigger: 'change'
          }
        ],
        city: [
          {
            required: true,
            message: '请选择区域'
          }
        ],

        code: [
          {
            required: true,
            message: '请获取区域编号',
            trigger: 'blur'
          }
        ]
        // name: [{
        //   required: true,
        //   message: '请输入区域名称',
        //   trigger: 'blur'
        // }],
      }
    }
  },
  created() {
    // this.findChinaCityFun()
    // this.searchs()
    console.log('父组件传值', this.tochild)
  },
  mounted() {
    this.findChinaCityFun()
    this.searchs()
  },
  methods: {
    // 获得所有区域信息
    findChinaCityFun() {
      // const that = this
      const data = {
        token: this.$store.getters.token
      }
      findChinaCity(data).then(res => {
        this.districtMap = res
        // console.log(res);
      })
    },
    // 分页尺寸改变
    handleSizeChange(size) {
      this.pageSize = size
      this.searchs()
    },
    // 分页换页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.searchs()
    },
    // 修改回显
    dataEcho(row) {
      this.dialogStatus = '修改'
      this.addUpdateVisible = true
      this.$nextTick(() => {
        this.send = {
          id: row.id,
          district: row.district,
          city: row,
          code: row.code
        }
      })
    },
    // 查看区域
    scanRegion(row) {
      row.toPage = 'hospital'
      row.childTitle = row.city
      row.data = {
        hospitalId: '',
        regionId: row.id
      }
      this.$emit('child2Far', row)
    },
    // 重置分页信息
    clearPagination() {
      this.pageNum = 1
      this.pageSize = 10
      this.total = 0
    },

    searchs() {
      const data = {
        token: this.$store.getters.token,
        userId: parseInt(this.$store.getters.userId),
        name: this.regionForm.name,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      findRegionsByUserId(data)
        .then(res => {
          // if(res.code===0){
          this.tableData = res.list
          this.total = res.total
          // }else{
          //   this.$message.error('请求异常')
          // }
        })
        .catch(err => {
          console.log(err)
        })
    },
    saveRegion(send, formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          const data = {
            id: send.id,
            district: send.district,
            city: send.city.city,
            code: send.code,
            name: send.district + ' - ' + send.city.city,
            token: this.$store.getters.token
          }
          // 获取新增 或 修改的接口
          const saveRegionApi = this.dialogStatus === '新增' ? saveRegions : updateRegions
          saveRegionApi(data).then(res => {
            // 存在id则认为保存成功
            if (res.id) {
              this.addUpdateVisible = false
              this.$message({
                message: this.dialogStatus + '成功',
                type: 'success'
              })
              this.resetForm(formname)
              this.searchs()
            }
          })
        } else {
          return false
        }
      })
    },
    handleClose(formName) {
      this.addUpdateVisible = false
      this.resetForm(formName)
      Object.assign(this.$data.send, this.$options.data().send)
    },
    closeaddbase() {
      this.$nextTick(() => {
        this.handleClose('addbase')
      })
      this.resetForm('addbase')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style scoped>
.addBtn{
      position: relative;
      top: -80px;
    }
</style>
